import styled from 'styled-components';

export const BlobSpan = styled.span`
  color: ${props => (props.color ? props.color : '#000')};
  font-size: 14px;
  font-weight: 600;
`;

/**
 * div底部
 * @type {StyledComponent<"div", AnyIfEmpty<DefaultTheme>, {}, never>}
 */
export const DivFooter = styled.div.attrs(props => ({
  textAlign: props.textAlign || 'left',
  display: props.display || 'block',
}))`
  position: absolute;
  bottom: 0;
  width: 100%;
  border-top: 1px solid #e8e8e8;
  padding: 10px 16px;
  left: 0;
  background: #fff;
  border-radius: 0 0 4px 4px;
  text-align: ${props => props.textAlign};
  display: ${props => props.display};
  z-index: 1;
`;

/**
 * 客制化Span
 */
export const LSpan = styled.span.attrs(props => ({
  color: props.color || '#27bba8',
  marginLeft: props.marginLeft || '0px',
  marginRight: props.marginRight || '0px',
  fontWeight: props.fontWeight || 'normal',
  cursor: props.cursor || 'auto',
}))`
  color: ${props => props.color};
  margin-left: ${props => props.marginLeft};
  margin-right: ${props => props.marginRight};
  font-weight: ${props => props.fontWeight};
  cursor: ${props => props.cursor};
  //cursor: 'pointer',
`;

/**
 * 水平flex布局的div
 * @type {*}
 */
export const LFlexHDiv = styled.div.attrs(props => ({
  marginLeft: props.marginLeft || '0px',
  marginRight: props.marginRight || '0px',
  marginTop: props.marginTop || '0px',
  justifyContent: props.justifyContent || 'left',
  flex: props.flex || '0',
}))`
  display: flex;
  align-items: center;
  flex: ${props => props.flex};
  margin-left: ${props => props.marginLeft};
  margin-right: ${props => props.marginRight};
  margin-top: ${props => props.marginTop};
  justify-content: ${props => props.justifyContent};
`;

/**
 * modal默认容器
 * @type {*}
 */
export const LModalBody = styled.div.attrs(props => ({
  width: props.width || '100%',
  height: props.height || 'calc((100vh * 0.5))',
}))`
  width: ${props => props.width};
  height: ${props => props.height};
  overflow-y: auto;
  overflow-x: hidden;
`;
